<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" ></script>
</head>

<body>
        
    
  <p id="username"></p>
  <!-- <div id="loader-container"><div id="loader-5"></div></div> -->
  <div class="background" id="background" style="height: 100vh;flex-direction:row;align-content: space-between;">
    <div class="switch_border">
      <b>
        <p style="margin-bottom:40px;">数据采集</p>
      </b>
      <div class="container">
        <div data-text="温度" name="val" style="--r:-35;" class="glass">
          <svg t="1718432717750" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="9437" width="60" height="60">
            <path
              d="M383.044267 269.277867m30.344533 0l60.672 0q30.344533 0 30.344533 30.344533l0 0q0 30.344533-30.344533 30.344533l-60.672 0q-30.344533 0-30.344533-30.344533l0 0q0-30.344533 30.344533-30.344533Z"
              fill="#444444" p-id="9438"></path>
            <path
              d="M383.044267 405.8112m30.344533 0l60.672 0q30.344533 0 30.344533 30.344533l0 0q0 30.344533-30.344533 30.344534l-60.672 0q-30.344533 0-30.344533-30.344534l0 0q0-30.344533 30.344533-30.344533Z"
              fill="#444444" p-id="9439"></path>
            <path
              d="M507.562667 68.334933a147.9168 147.9168 0 0 0-143.479467 147.848534v312.951466l-4.283733 3.464534A238.557867 238.557867 0 0 0 273.066667 716.8c0 131.959467 106.973867 238.933333 238.933333 238.933333s238.933333-106.973867 238.933333-238.933333l-0.085333-6.1952a238.5408 238.5408 0 0 0-86.647467-178.005333l-4.3008-3.464534V216.183467A147.9168 147.9168 0 0 0 512 68.266667l-4.437333 0.068266zM512 136.533333a79.650133 79.650133 0 0 1 79.650133 79.650134V546.474667a34.133333 34.133333 0 0 0 15.138134 28.3648A170.4448 170.4448 0 0 1 682.666667 716.8c0 94.2592-76.407467 170.666667-170.666667 170.666667S341.333333 811.0592 341.333333 716.8c0-57.685333 28.808533-110.421333 75.8784-141.943467a34.133333 34.133333 0 0 0 15.138134-28.3648V216.183467A79.650133 79.650133 0 0 1 512 136.533333z"
              fill="#444444" p-id="9440"></path>
            <path
              d="M426.666667 665.6a34.133333 34.133333 0 0 1 34.133333 34.389333l0.085333 3.072a64.477867 64.477867 0 0 0 64.392534 61.149867v68.266667l-4.215467-0.068267A132.744533 132.744533 0 0 1 392.533333 699.733333l0.085334-2.56A34.133333 34.133333 0 0 1 426.666667 665.6z"
              fill="#00B386" p-id="9441"></path>
          </svg>

        </div>

        <div data-text="湿度" name="val" style="--r:-15;" class="glass">
          <svg t="1718432670025" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="8292" width="60" height="60">
            <path
              d="M441.6 96.33H324.71l-8.18 10.55h133.25l-8.18-10.55zM560.86 117.42H364.34l-8.18-10.54h212.88l-8.18 10.54zM267.16 135.37h116.89l8.18-10.55H258.98l8.18 10.55zM227.53 114.28h116.89l8.18 10.54H219.35l8.18-10.54zM582.65 96.33h116.9l8.18 10.55H574.47l8.18-10.55z"
              fill="#0EBBCB" p-id="8293"></path>
            <path
              d="M543.02 117.42H659.91l8.19-10.54H534.84l8.18 10.54zM757.1 135.37H640.2l-8.18-10.55h133.25l-8.17 10.55zM796.73 114.28h-116.9l-8.18 10.54h133.26l-8.18-10.54zM582.65 182.54h116.9l8.18-10.55H574.47l8.18 10.55zM463.4 161.45H659.92l8.18 10.54H455.22l8.18-10.54zM757.1 143.5H640.2l-8.18 10.54h133.25l-8.17-10.54zM796.73 164.59h-116.9l-8.18-10.55h133.26l-8.18 10.55zM441.6 182.54H324.71l-8.18-10.55h133.25l-8.18 10.55z"
              fill="#0EBBCB" p-id="8294"></path>
            <path
              d="M481.24 161.45h-116.9l-8.18 10.54h133.26l-8.18-10.54zM267.16 143.5h116.9l8.18 10.54H258.98l8.18-10.54zM227.53 164.59h116.89l8.18-10.55H219.35l8.18 10.55z"
              fill="#0EBBCB" p-id="8295"></path>
            <path
              d="M582.4 927.67h116.89l8.18-10.55H574.22l8.18 10.55zM463.14 906.58H659.66l8.18 10.54H454.96l8.18-10.54zM756.84 888.64H639.95l-8.18 10.54h133.25l-8.18-10.54zM796.48 909.73h-116.9l-8.18-10.55h133.25l-8.17 10.55zM441.35 927.67h-116.9l-8.18-10.55h133.26l-8.18 10.55z"
              fill="#0EBBCB" p-id="8296"></path>
            <path
              d="M480.98 906.58h-116.9l-8.18 10.54h133.26l-8.18-10.54zM266.9 888.64h116.9l8.18 10.54H258.72l8.18-10.54zM227.27 909.73h116.9l8.18-10.55H219.09l8.18 10.55zM441.35 841.47h-116.9l-8.18 10.54h133.26l-8.18-10.54zM560.6 862.55H364.08l-8.18-10.54h212.88l-8.18 10.54zM266.9 880.5h116.9l8.18-10.54H258.72l8.18 10.54zM227.27 859.41h116.9l8.18 10.55H219.09l8.18-10.55zM582.4 841.47h116.89l8.18 10.54H574.22l8.18-10.54z"
              fill="#0EBBCB" p-id="8297"></path>
            <path
              d="M542.76 862.55h116.9l8.18-10.54H534.58l8.18 10.54zM756.84 880.5H639.95l-8.19-10.54h133.26l-8.18 10.54zM796.47 859.41H679.58l-8.18 10.55h133.25l-8.18-10.55z"
              fill="#0EBBCB" p-id="8298"></path>
            <path
              d="M665.51 489.14a14 14 0 0 0-12.06-7.39 14.5 14.5 0 0 0-12.27 7l-2 3.55c-26.62 46.07-62.72 109.15-62.72 147.13a77.22 77.22 0 1 0 154.37 0c0-33-27.88-83.63-52.48-127.61-4.81-8-9.06-15.68-12.82-22.65zM653.24 689.3A49.61 49.61 0 0 1 604 639.4c0-26.14 27.25-77.08 48.78-115.27l0.63 1.18c20.91 37.29 48.79 88.3 48.79 114.09a49.7 49.7 0 0 1-48.93 49.9zM458.1 363.9c-7.81-13.94-15.26-27.39-21.81-39.73l-4.12-7.59a14.09 14.09 0 0 0-24.32 0l-8.64 14.21C355 407.88 287.7 524.4 287.7 590.82a132.42 132.42 0 1 0 264.83-0.07c0-57.84-51.78-151-93.32-225.94z m-38 332.3a104.9 104.9 0 0 1-104.53-105.38c0-57 60.85-164.27 104-239.05 4.46 8.22 9.27 16.8 13.94 25.65l0.48 0.91c37.92 68.3 89.84 161.83 89.84 212.35A105.16 105.16 0 0 1 420.12 696.2z m311.34-227.48c-7-6.41-9.62-16.87-12.48-28.92-4.11-17.5-9.2-39.24-31.85-53-27.87-16.94-54.36-7-77.77 1.46-16.24 5.92-31.65 11.57-45.79 8-55.2-13.94-51.65-78.76-51.51-81.62a13.94 13.94 0 1 0-27.81-1.95c-2.23 31.3 10 94.79 72.42 110.54 22.58 5.71 43.69-2 62.3-8.85 23.14-8.51 38.12-13.25 53.67-3.77 12.33 7.6 15.12 18.26 19.3 35.48 3.42 14.63 7.32 31.15 20.91 43.42a13.94 13.94 0 0 0 18.61-20.77z m0 0"
              fill="#0EBBCB" p-id="8299"></path>
          </svg>
        </div>
        <div data-text="烟感" name="val" style="--r:5;" class="glass">
          <svg t="1718432846137" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="20913" width="60" height="60">
            <path
              d="M471.578947 452.715789s-266.778947 204.8-167.073684 377.263158c-21.557895-13.473684-97.010526-67.368421-118.568421-97.010526-59.284211-75.452632-56.589474-126.652632-35.031579-177.852632 48.505263-115.873684 194.021053-229.052632 237.136842-301.810526 72.757895-118.568421 13.473684-199.410526 13.473684-199.410526s150.905263 67.368421 158.989474 194.021052c10.778947 123.957895-88.926316 204.8-88.926316 204.8z"
              fill="#10ABFF" opacity=".4" p-id="20914"></path>
            <path
              d="M579.368421 234.442105C565.894737 161.684211 509.305263 94.315789 412.294737 37.726316h-2.694737-2.694737-2.694737-2.694737s-2.694737 0-2.694736 2.694737h-2.694737l-2.694737 2.694736-2.694737 2.694737v10.778948s0 2.694737 2.694737 2.694737v2.694736c40.421053 67.368421 24.252632 145.515789-48.505263 234.442106-13.473684 16.168421-32.336842 35.031579-53.894737 59.28421-53.894737 45.810526-102.4 97.010526-129.347368 140.126316-35.031579 51.2-45.810526 110.484211-32.336843 164.378947 16.168421 70.063158 72.757895 134.736842 167.073685 188.631579 2.694737 2.694737 5.389474 2.694737 8.08421 2.694737 2.694737 0 5.389474 0 8.084211-2.694737 2.694737-2.694737 5.389474-2.694737 5.389473-5.389473v-2.694737-2.694737-2.694737-2.694737c0-2.694737 0-2.694737-2.694736-2.694737v-2.694736c-53.894737-78.147368 0-167.073684 35.031578-210.189474l2.694737-2.694737c35.031579-45.810526 70.063158-80.842105 99.705263-113.178947 21.557895-21.557895 40.421053-40.421053 56.589474-61.978948 59.284211-72.757895 80.842105-140.126316 70.063158-204.8z m-145.515789 231.747369c-32.336842 32.336842-67.368421 70.063158-105.094737 118.568421-53.894737 67.368421-72.757895 134.736842-61.978948 196.715789-53.894737-40.421053-88.926316-83.536842-99.705263-132.042105-10.778947-43.115789 0-91.621053 26.947369-134.736842l2.694736-2.694737c24.252632-40.421053 75.452632-91.621053 115.873685-132.042105 24.252632-24.252632 43.115789-43.115789 56.589473-59.284211 75.452632-88.926316 86.231579-164.378947 75.452632-218.273684 45.810526 35.031579 88.926316 80.842105 99.705263 140.126316 10.778947 51.2-8.084211 107.789474-53.894737 167.073684l-56.589473 56.589474zM900.042105 428.463158c-13.473684-67.368421-64.673684-129.347368-153.6-180.547369h-2.694737-2.694736-2.694737-2.694737c-2.694737 0-2.694737 0-2.694737 2.694737h-2.694737l-2.694737 2.694737-2.694736 2.694737v10.778947s0 2.694737 2.694736 2.694737v2.694737c37.726316 59.284211 21.557895 129.347368-43.115789 210.189474-10.778947 13.473684-29.642105 32.336842-48.505263 53.894737-40.421053 40.421053-86.231579 88.926316-110.484211 129.347368-29.642105 45.810526-40.421053 99.705263-29.642105 150.905263 16.168421 64.673684 67.368421 121.263158 153.6 172.463158 2.694737 2.694737 5.389474 2.694737 8.08421 2.694737 2.694737 0 5.389474 0 8.084211-2.694737 2.694737-2.694737 5.389474-2.694737 5.389474-5.389474v-2.694736-2.694737-2.694737-2.694737s0-2.694737-2.694737-2.694737v-2.694737c-45.810526-70.063158 0-148.210526 32.336842-188.631579l2.694737-2.694736c32.336842-43.115789 61.978947-75.452632 91.621052-102.4 18.863158-18.863158 37.726316-37.726316 51.2-53.894737 45.810526-72.757895 64.673684-132.042105 53.894737-191.326316z m-86.231579 156.294737c-13.473684 16.168421-29.642105 32.336842-48.505263 51.2-29.642105 29.642105-61.978947 61.978947-97.010526 107.789473-48.505263 59.284211-67.368421 121.263158-56.589474 175.157895-48.505263-35.031579-78.147368-75.452632-86.231579-115.873684-8.084211-40.421053 0-80.842105 24.252632-121.263158l2.694737-2.694737c21.557895-35.031579 67.368421-83.536842 105.094736-121.263158 21.557895-21.557895 40.421053-40.421053 51.2-53.894737 64.673684-80.842105 78.147368-145.515789 70.063158-194.021052 40.421053 32.336842 78.147368 72.757895 86.231579 121.263158 8.084211 51.2-8.084211 102.4-51.2 153.6z"
              fill="#10ABFF" p-id="20915"></path>
          </svg>
        </div>

        <div data-text="光线" name="val" style="--r:25;" class="glass">
          <svg t="1718432965208" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="26363" width="60" height="60">
            <path
              d="M434 886.8c-9.9 0-18-8.1-18-18V670.5c-107.8-40-179.3-142-179.3-258 0-151.8 123.5-275.3 275.3-275.3s275.3 123.5 275.3 275.3c0 116-71.5 218.1-179.3 258v198.2c0 9.9-8.1 18-18 18H434z"
              fill="#97DCFF" p-id="26364"></path>
            <path
              d="M512 155.3c-5 0-10 0.2-15 0.5 135.1 7.8 242.2 119.7 242.2 256.8 0 114.9-75.3 212.1-179.3 245.2v211.1h30V657.7c103.9-33 179.3-130.3 179.3-245.2 0.1-142.1-115.1-257.2-257.2-257.2z"
              fill="#B3EAFF" p-id="26365"></path>
            <path
              d="M381.9 813.8c-9.9 0-18-8.1-18-18v-42c0-9.9 8.1-18 18-18H642c9.9 0 18 8.1 18 18v42c0 9.9-8.1 18-18 18H381.9z"
              fill="#F56E73" p-id="26366"></path>
            <path d="M612.1 753.8h30v42h-30z" fill="#FFA1A8" p-id="26367"></path>
            <path d="M624.3 417.9m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="26368"></path>
            <path d="M399.7 417.9m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="26369"></path>
            <path
              d="M805.3 412.5c0-161.7-131.6-293.3-293.3-293.3S218.8 250.8 218.8 412.5c0 119.3 71 224.8 179.3 270.3v35H382c-19.9 0-36 16.1-36 36v42c0 19.9 16.1 36 36 36h16v37c0 19.9 16.1 36 36 36h156c19.9 0 36-16.1 36-36v-37h16.1c19.9 0 36-16.1 36-36v-42c0-19.9-16.1-36-36-36H626v-35c108.2-45.5 179.3-151 179.3-270.3zM590 868.7H434v-37h156v37z m52.1-114.9v42H381.9v-42h260.2zM590 657.7v60.1h-60V537.7l66.5-66.5c7-7 7-18.4 0-25.5-7-7-18.4-7-25.5 0l-59 59-59-59c-7-7-18.4-7-25.5 0-7 7-7 18.4 0 25.5l66.5 66.5v180.1h-60v-60.1c-103.9-33-179.3-130.3-179.3-245.2 0-142.1 115.2-257.3 257.3-257.3s257.3 115.2 257.3 257.3c0 114.9-75.4 212.1-179.3 245.2z"
              fill="#453B56" p-id="26370"></path>
          </svg>
        </div>
      </div>

    </div>
    <div class="switch_border" style="flex-direction: column;">
      <b>
        <p style="justify-content: center;margin-bottom:40px; ">设备控制</p>
      </b>
      <div style="display: flex;">
        <div class="switch_tab">
          <p class="tab">空调状态</p>
          <label class="switch">
            <input type="checkbox" name="val" onchange="onclicked(4)">
            <span class="slider"></span>
          </label>
        </div>
        <div class="switch_tab">
          <p class="tab">门锁状态</p>
          <label class="switch">
            <input type="checkbox" name="val" onchange="onclicked(5)">
            <span class="slider"></span>
          </label>
        </div>
      </div>
      <div style="display: flex;">
        <div class="switch_tab">
          <p class="tab">报警开关</p>
          <label class="switch">
            <input type="checkbox" name="val" onchange="onclicked(6)">
            <span class="slider"></span>
          </label>
        </div>
        <div class="switch_tab">
          <p class="tab">灯控开关</p>
          <label class="switch">
            <input type="checkbox" name="val" onchange="onclicked(7)">
            <span class="slider"></span>
          </label>
        </div>
      </div>
      <div style="display: flex;">

        <div class="switch_tab">
          <p class="tab">除湿开关</p>
          <label class="switch">
            <input type="checkbox" name="val" onchange="onclicked(8)">
            <span class="slider"></span>
          </label>
        </div>
        <div class="switch_tab">
          <p class="tab">湿度阈值</p>
          <input type="text" name="val" class="limit" onchange="onclicked(9)">
        </div>
      </div>
      <div style="display: flex;">
        <div class="switch_tab">
          <p class="tab">温度上限</p>
          <input type="text" autocomplete="off" name="val" class="limit" onchange="onclicked(10)">
        </div>
        <div class="switch_tab">
          <p class="tab">温度下限</p>
          <input type="text" autocomplete="off" name="val" class="limit" onchange="onclicked(11)">
        </div>
      </div>
    </div>
    <div class="switch_border" style="margin-top:2px;flex-direction: column; "><b>
        <p style="align-content: center;justify-content: center;">视频监控</p>
      </b>
      <img src="http://192.168.31.252:8080/?action=stream"  style="height: 250px;width: 250px;object-fit: cover;"/>
    </div>
    <div class="switch_border" style="margin-top:2px; ">
      <b>
        <p style="margin-top:5px; ">历史记录</p>
      </b>
      <div id="main" style="height: 300px;width: 600px;"></div>
    </div>
  </div>
</body>
<script type="text/javascript" src="js/home.js"></script>

</html>